<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: 600px;">
            <el-form ref="smsPurchaseForm" :model="form.order" :rules="form.rules" label-width="80px" label-position="left">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.order.mobile"  />
              </el-form-item>
              <el-form-item label="短信套餐" prop="product_id">
                <el-table :data="products" highlight-current-row border @current-change="handleSelectedProduct">
                  <el-table-column align="center" label="套餐名称:" >
                    <template v-slot="scope">
                      {{ scope.row.name }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="短信条数:">
                    <template v-slot="scope">
                      {{ scope.row.msg_count }}条
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="套餐价格:" >
                    <template v-slot="scope">
                      {{ scope.row.price }}元
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item label="购买数量" prop="order_count">
                <el-input v-model.number="form.order.order_count"  />
              </el-form-item>
              <el-form-item label="订单总额">
                <el-input v-model="price"  />
              </el-form-item>
            </el-form>
          <el-button  size="mini"  type="primary" @click="handleCreate">
            提交订单
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 600px;">
          <el-alert :closable="false">
            购买须知：<br><br>
            1.本套餐只包含通知及验证类营销短信,短信单价请联系我司销售人员；<br><br>
            2.套餐包购买需独立支付，不支持账户余额抵扣；<br><br>
            3.套餐包不支持更换，不支持退款；<br><br>
            4.套餐包短信使用有效期参见套餐内说明，自套餐购买成功当日起计算；<br><br>
            5.当购买多个套餐包时，优先扣取先购买的套餐包；<br><br>
            6.开票、付款事宜请直接联系与您对接的销售人员；<br><br>
            7.更多商品信息，请联系我司销售经理；<br><br>
            8.本套餐最终解释权归系统管理所有。
          </el-alert>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {createSmsOrder,getSmsProducts} from '@/api/sms'

const defaultOrder = {
  mobile: '',
  order_count: 0,
  product_id: 0,
}

export default {
  name: 'SmsOrderPurchase',
  data() {
    return {
      form:{
        order: Object.assign({}, defaultOrder),
        rules:{
          mobile: [
            { required: true, message: '请输入联系方式' }
          ],
          product_id: [
            { required: true, message: '请选择套餐' },
          ],
          order_count: [
            { required: true, message: '请输入订购数量' },
            { type: 'number',min: 1, message: '订购数量必须大于或等于1'},
          ]
        }
      },
      products: [],
      listQuery:{},
      selectedProduct:null,
      dialogVisible: false,
      dialogType: 'new'
    }
  },
  created() {
    this.getProducts()
  },
  computed: {
    price() {
      if(this.form.order.order_count === 0 || this.selectedProduct === null) {
        return ''
      }
      const total = this.form.order.order_count * this.selectedProduct.price
      return this.form.order.order_count +' x ' + this.selectedProduct.price + ' = ' + total + '元'
    }
  },
  methods: {
    async getProducts() {
      const res = await getSmsProducts(this.listQuery)
      this.products = res.data.list
    },
    handleSelectedProduct(row) {
      this.form.order.product_id =row.id
      this.selectedProduct = row
    },
    handleCreate() {
      this.$refs.smsPurchaseForm.validate((valid) => {
        if (valid) {
          createSmsOrder(this.form.order).then(resp => {
            if(resp.code === 20000) {
              this.dialogVisible = false
              this.$message.success('套餐已订购')
              this.$refs.smsPurchaseForm.resetFields()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
